﻿<!DOCTYPE html>
<html>
<head>
    <title>Click Events</title>
    <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../js/knockout-2.1.0.min.js"></script>
    <script type="text/javascript" src="../js/twitterApi.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/reset.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>
<body>
    <h1>The "event" binding</h1>
    <p>
        Hover over het information icon   
    </p>
    <div class="buttonholder">
        <img src="../images/metro.icons/white/i.png" data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }" class="info" />
        <img src="../images/metro.icons/white/heart.png" onclick="document.location.href='/'" />
    </div>
    <div>
        <div data-bind="visible: detailsEnabled" class="info-popup">
            The event binding allows you to add an event handler for a specified event so that your chosen JavaScript function will be invoked when that event is triggered for the associated DOM element. This can be used to bind to any event, such as keypress, mouseover or mouseout.
        </div>
    </div>



    <script type="text/javascript">
        var viewModel = {
            detailsEnabled: ko.observable(false),
            enableDetails: function () {
                this.detailsEnabled(true);
            },
            disableDetails: function () {
                this.detailsEnabled(false);
            }
        };
        ko.applyBindings(viewModel);
    </script>


</body>
</html>
